<template>
  <!-- 添加客户 -->
  <div class="addCustomer">
    <el-card class="add-card">
      <div class="add-header">
        <i class="el-icon-user-solid"></i>
        <span>添加最新用户资料</span>
      </div>
    </el-card>
    <el-card class="add-centent">
      <div class="add-form">
        <el-form 
          ref="addform"
          label-width="140px" 
          :model="addForm"
          status-icon
          :rules="addRules"
        >
          <el-form-item label="客户名称" prop="nickname">
            <el-input v-model="addForm.nickname"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="contact">
            <el-input v-model="addForm.contact"></el-input>
          </el-form-item>
          <el-form-item label="QQ" prop="qq">
            <el-input v-model="addForm.qq"></el-input>
          </el-form-item>
          <el-form-item label="微信" prop="weixin">
            <el-input v-model="addForm.weixin"></el-input>
          </el-form-item>
          <el-form-item label="咨询专业" prop="zhuanye">
            <el-col :span="4">
              <el-select v-model="addForm.infoclass" placeholder="请选择专业">
                <el-option label="web前端" value="web前端"></el-option>
                <el-option label="UI设计" value="UI设计"></el-option>
              </el-select>
            </el-col>
            <el-col :span="20">
              <el-input v-model="addForm.zhuanye"></el-input>
            </el-col>
            
          </el-form-item>
          <el-form-item label="信息来源" prop="laiyuan">
            <el-input v-model="addForm.laiyuan"></el-input>
          </el-form-item>
          <el-form-item label="所在地区" prop="dizhi">
            <el-input v-model="addForm.dizhi"></el-input>
          </el-form-item>
          <el-form-item label="选择客服" prop="kefu">
             <el-col :span="8">
              <el-select 
                v-model="addForm.kefu" 
                placeholder="请选择客服"
                clearable
              >
                <el-option label="客服1" value="客服1"></el-option>
                <el-option label="客服2" value="客服2"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button 
            type="primary" 
            style="width:150px;height:50px;"
            @click="submitForm('addform')"
            >确认提交</el-button>
            <el-button 
            style="width:100px;height:50px;"
            @click="resetForm('addform')"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { testForm , addUser } from "../../network/api/api"

export default {
  name: "AddCustomer",
  data() {
    // 自定义表单的验证规则
    var checkContact = (rule, value, callback) => {
          console.log(rule)
          let mes = "";
          if(rule.field == "contact"){
            mes = "电话"
          }else if(rule.field == "qq"){
            mes = "QQ"
          }else if(rule.field == "weixin"){
            mes = "微信"
          }
          testForm(value,rule.field)
          .then(
            res => {
              console.log(res);
              if(res.data.code == 403){
                 this.$alert(
                  mes + '为<span style="color:red;">'+ value +'</span>的用户已经存在,<br>客户名称是<span style="color:red;">'+res.data.content.nickname+'</span>,<br>请勿重复提交!!!', 
                  '提示',
                  {
                    showConfirmButton:false,
                    dangerouslyUseHTMLString:true
                  }
                );
                callback(new Error('该用户已存在'))
              }else{
                callback()
              }
              
            }
          )
        };

    return {
      addForm:{
        nickname:"",
        contact:"", //联系方式
        weixin:"",
        qq:"",
        kefu:"",
        dizhi:"",
        infoclass:"", //专业名称
        zhuanye:"",
        laiyuan:""
      },
      addRules:{
        nickname:[
          {required:true,message:"请输入用户名",trigger:"blur"}
        ],
        contact:[
          {pattern:"^1[3456789]\\d{9}$",message:'手机号不正确',trigger:"blur"},
          {validator:checkContact, trigger: 'blur' }
        ],
        qq:[
          {pattern:"^\\d{6,11}$",message:'qq号不正确',trigger:"blur"},
          {validator:checkContact, trigger: 'blur' }
        ],
        weixin:[
          {pattern:"^(\\w|-){5,}$",message:'手机号不正确',trigger:"blur"},
          {validator:checkContact, trigger: 'blur' }
        ],
        zhuanye:[
          {required:true,message:"请输入用户名",trigger:"blur"}
        ],
        laiyuan:[
          {required:true,message:"请输入用户名",trigger:"blur"}
        ],
        kefu:[
           {required:true,message:"请输入用户名",trigger:"blur"}
        ]
      }
    }
  },
  methods:{
    //提交
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addUser(this.addForm).then(
              res => {
                console.log(res)
                if(res.data.code == 200){
                  this.$message("添加成功")
                  this.$router.push("/potentialClients")
                }else{
                  this.$message.error("添加失败")
                }
              }
            )
          } else {
            this.$message.error("信息填写不完整，请补充完整再试")
            return false;
          }
        });
      },
    // 重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    // testOneDate(str,boo){
    //   let that = this
    //   if(boo){
    //     let key = "";
    //     let type = ""
    //     let mes = ""
    //     if(str == "contact"){
    //       key = this.addForm.contact
    //       type = 'contact'
    //       mes = "电话"
    //     }else if(str == 'qq'){
    //       key  = this.addForm.qq
    //       type = 'qq'
    //       mes = "QQ"
    //     }else if(str == 'weixin'){
    //       key = this.addForm.weixin
    //       type = 'weixin'
    //       mes = "微信"
    //     }
    //     testForm(key,type)
    //     .then(res => {
    //       console.log(res)
    //       if(res.data.code == 200){
    //         that.$message("可以使用")
    //       }else if(res.data.code == 403){
    //         this.$alert(
    //           mes + '为<span style="color:red;">'+res.data.content[type]+'</span>的用户已经存在,<br>客户名称是<span style="color:red;">'+res.data.content.nickname+'</span>,<br>请勿重复提交!!!', 
    //           '提示',
    //           {
    //             showConfirmButton:false,
    //             dangerouslyUseHTMLString:true
    //           }
    //         );
    //       }
    //     })
    //   }
    // }
  }
};
</script>

<style lang="less" scoped>
.addCustomer {
  .add-card {
    margin-bottom: 30px;
    .add-header {
      font-size: 26px;
      color: #409eff;
      font-weight: 600;
      i {
        margin-right: 20px;
      }
    }
  }
  .add-centent{
    .add-form{
      padding: 0px 200px 0px 50px;
    }
  }
}
</style>